<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{fragments/header :: header(title='点餐首页')}"></div>
</head>
<body>

<!-- 搜索栏 -->
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <form th:action="@{/restaurant/search}" method="get" class="d-flex">
                <input th:value="${searchName}" type="text" th:name="restaurantName" class="form-control me-2" placeholder="搜索餐厅">
                <button class="btn btn-primary" type="submit">搜索</button>
            </form>
        </div>
    </div>
</div>
<!-- 推荐餐厅 -->
<div class="container mt-5">
    <h2 class="mb-4">推荐餐厅</h2>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <!-- 遍历餐厅列表 -->
        <div class="col" th:each="restaurant:${restaurants}">
            <div class="card h-100 dish-card">
                <!-- 动态绑定餐厅图片 -->
                <script>
                    var imageUrl = '/images/' + [[${restaurant.logo}]];
                    console.log(imageUrl);
                </script>
                <img th:src="${restaurant.logo}" class="card-img-top" alt="餐厅图片">
                <div class="card-body">
                    <!-- 动态绑定餐厅名称 -->
                    <h5 class="card-title" th:text="${restaurant.name}"></h5>
                    <!-- 动态绑定餐厅描述 -->
                    <p class="card-text" th:text="${restaurant.description}"></p>
                    <!-- 动态绑定查看菜单链接 -->
                    <a th:href="@{/restaurant/{id}(id=${restaurant.id})}" class="btn btn-primary">查看菜单</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 页脚 -->
<footer class="bg-light mt-5 py-4">
    <div class="container text-center">
        <p class="text-muted mb-0">© 2025 点餐系统 · 保留所有权利</p>
    </div>
</footer>

<!-- 脚本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>


</body>
</html>